<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSearchList } from "../../apis/music";
import emitter from "../../utils/eventBus";
import { createWindow } from "../../utils/ipcRenderer";

const router = useRouter();
const route = useRoute();
const loading = ref(false);

const singerList = ref([]);
const albumList = ref([]);
const songList = ref([]);
const videoList = ref([]);
const playList = ref([]);

const getInit = async (data) => {
  loading.value = true
  let res1 = await getSearchList(data, 3, 0, 100);
  singerList.value = res1.result.artists;
  let res2 = await getSearchList(data, 3, 0, 10);
  albumList.value = res2.result.albums;
  let res3 = await getSearchList(data, 16, 0, 1);
  songList.value = res3.result.songs;
  let res4 = await getSearchList(data, 5, 0, 1014);
  if (res4.result) {
    videoList.value = res4.result.videos;
  } else {
    videoList.value = [];
  }
  let res5 = await getSearchList(data, 10, 0, 1000);
  playList.value = res5.result.playlists;
  loading.value = false
};

getInit(route.params.keyword);

emitter.on("updateSearch", (data) => {
  getInit(data);
});

const toDetail = (type) => {
  if (type == "album") {
    router.push("/searchAlbumList/" + route.params.keyword);
  } else if (type == "singer") {
    router.push("/searchSingerList/" + route.params.keyword);
  } else if (type == "song") {
    router.push("/searchSongList/" + route.params.keyword);
  } else if (type == "video") {
    router.push("/searchVideoList/" + route.params.keyword);
  } else {
    router.push("/searchPlayList/" + route.params.keyword);
  }
};
</script>

<script>
export default { name: "searchHome" };
</script>

<template>
  <div v-loading="loading" class="search_home">
    <el-scrollbar height="100%">
      <div class="singer_album">
        <div class="singer">
          <div class="head">
            <div class="title">艺人</div>
            <div @click="toDetail('singer')" class="toAll">查看全部</div>
          </div>
          <search-singer :singerList="singerList"></search-singer>
        </div>
        <div class="album">
          <div class="head">
            <div class="title">专辑</div>
            <div @click="toDetail('album')" class="toAll">查看全部</div>
          </div>
          <search-album :albumList="albumList"></search-album>
        </div>
      </div>
      <div class="songs">
        <div class="head">
          <div class="title">歌曲</div>
          <div @click="toDetail('song')" class="toAll">查看全部</div>
        </div>
        <search-song :songList="songList"></search-song>
      </div>
      <div class="video">
        <div class="head">
          <div class="title">视频</div>
          <div @click="toDetail('video')" class="toAll">查看全部</div>
        </div>
        <search-video :videoList="videoList"></search-video>
      </div>
      <div class="list">
        <div class="head">
          <div class="title">歌单</div>
          <div @click="toDetail('list')" class="toAll">查看全部</div>
        </div>
        <search-list :playList="playList"></search-list>
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.search_home {
  height: 100%;
  .head {
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 20px;
      font-weight: 600;
    }
    .toAll {
      cursor: pointer;
      font-size: 14px;
      color: rgb(146, 140, 140);
    }
  }
  .singer_album {
    display: flex;
    justify-content: space-between;
    .singer,
    .album {
      width: 47%;
    }
  }
}
</style>
